import React from 'react'
import './Footer.css'

class Footer extends React.Component{
  // 已完成任务数量
  doneCount = ()=>{
    const doneTasks = this.props.todos.filter((item)=>{
      return item.done === true
    })
    return doneTasks.length
  }
  
  // 删除已完成任务
  deleteSome = ()=>{
    console.log("this.props: ",this.props)
    this.props.deleteSome()
  }
  // 全选/取消全选任务
  handleChangeAll = (event)=>{
    this.props.handleChangeAll(event.target.checked)
  }
  // 
  render(){
    const {todos} = this.props
    return(
      <div className="todo-footer">
        <input type="checkbox" checked={this.doneCount()===todos.length && todos.length !== 0 ? true:false} onChange={this.handleChangeAll}/>
        <span>已完成{this.doneCount()} / 全部{todos.length}</span>
        <button className="btn btn-danger" onClick={this.deleteSome}>清除已完成任务</button>
      </div>
    )
  }
}

export default Footer